<template>
  <van-dialog
    v-model:show="val.md_jump"
    closeOnClickOverlay
    teleport="body"
    @confirm="set.jump"
  >
    <div class="vandialogbg">
      <van-cell-group inset>
        <van-field center v-model="val.jumptext" type="digit" label="页数" />
      </van-cell-group>
    </div>
  </van-dialog>

  <div class="_mbbox2 drk_div">
    <div class="nbox1 select_gap">
      <n-select
        :options="sval.season_list"
        :value="sval.season_click"
        @update:value="set.sl_click"
      />
      <n-input placeholder="公会名称" @input="set.guild_sea" />
    </div>
    <div class="nbox1">
      <div class="page">
        <div @click="set.page(1)">首页</div>
        <van-pagination
          v-if="val.maxpage > 1"
          @change="set.page"
          v-model="val.page"
          :page-count="val.maxpage"
          :show-prev-button="false"
          :show-next-button="false"
        />
        <div
          @click="
            val.jumptext = '';
            val.md_jump = true;
          "
        >
          跳转
        </div>
      </div>
      <van-loading vertical v-if="val.loading == true" style="margin-top: 16px">
        <template #icon>
          <van-icon name="star-o" size="30" />
        </template>
        Loading...
      </van-loading>
      <div class="ranking_gap">
        <div class="ranking_box" v-for="(item, key) in val.data">
          <div class="ranking_hover">
            <n-button
              size="tiny"
              type="gt_y"
              @click="cfg.ckdao({ user_id: item.user_id, season: sval.season_click })"
              >查刀</n-button
            >
          </div>
          <div class="title_font">〔{{ item.global_rank }}〕{{ item.guild_name }}</div>
          <n-grid class="ngrid" :cols="2" y-gap="8">
            <n-gi>
              <n-statistic
                label="累计伤害"
                :value="(item.maxdmg ?? 0).toLocaleString()"
              />
            </n-gi>
            <n-gi>
              <n-statistic
                label="每日伤害"
                :value="(item.dayavg ?? 0).toLocaleString()"
              />
            </n-gi>
            <n-gi>
              <n-statistic
                label="成员平均伤害"
                :value="(item.avgdmg ?? 0).toLocaleString()"
              />
            </n-gi>
            <n-gi>
              <n-statistic
                label="成员日均伤害"
                :value="(parseInt(item.avgdmg / item.day_count) ?? 0).toLocaleString()"
              />
            </n-gi>
          </n-grid>
        </div>
      </div>
      <div class="page">
        <div @click="set.page(1)">首页</div>
        <van-pagination
          v-if="val.maxpage > 1"
          @change="set.page"
          v-model="val.page"
          :page-count="val.maxpage"
          :show-prev-button="false"
          :show-next-button="false"
        />
        <div
          @click="
            val.jumptext = '';
            val.md_jump = true;
          "
        >
          跳转
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cfg } from "@/cfg/cfg.js";

export default {
  props: {
    tjval: {
      type: Object,
      required: false,
    },
  },
  setup(props) {
    const sval = props.tjval;
    const set = {
      tabhand: async (back, hand, page) => {
        val.loading = true;
        val.dateck = back;
        val.data = [];
        if (page == null) {
          val.page = 1;
        }
        cfg.router.replace({
          path: `/gt/tj-grk/${back}`,
          query: {
            p: val.page,
          },
        });
        await set.get_data();
      },
      jump: () => {
        val.md_jump = false;
        const page = parseInt(val.jumptext);
        if (page < 1 || page > val.maxpage || isNaN(page)) {
          cfg.alert3({
            message: "页数超出范围或输入错误",
          });
          return;
        }
        set.page(page);
      },
      guild_sea: (name) => {
        val.sea_gname = name;
        val.page = 1;
        set.get_data();
      },
      page: (page) => {
        cfg.router.replace({
          query: {
            p: page,
          },
        });
        val.page = page;
        set.get_data();
      },
      sl_click: (sid) => {
        val.season_click = sid;
        sval.season_click = sid;
        val.page = 1;
        set.get_data();
      },
      get_data: async () => {
        try {
          const back = await cfg.mget({
            url: `${cfg.url2}api/tj`,
            query: {
              type: "get_guilddmg_ranking",
              gname: val.sea_gname,
              page: val.page,
              season: sval.season_click,
            },
          });
          if (back.code == 0) {
            val.loading = false;
            const b = back.data;
            val.maxpage = b.maxpage;
            val.data = b.data;
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (e) {
          val.loading = false;
          cfg.alert3({
            message: e.message,
          });
        }
      },
    };
    const val = reactive({
      page: 1,
      data: [],
    });

    onMounted(async () => {
      val.loading = true;
      if (cfg.route.query.p != null) {
        val.page = parseInt(cfg.route.query.p);
      }
      set.get_data();
    });
    return { sval, cfg, set, val };
  },
};
</script>
